document.addEventListener('DOMContentLoaded', function() {
  new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: false,
    navigation: false,
    anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
    menu: '.navbar',
    scrollingSpeed: 700,
    onLeave: function(origin, destination, direction) {
      // 第一次离开第一页时显示导航栏
      if (destination.index > 0) {
        document.querySelector('.navbar').style.display = 'flex';
      } else {
        document.querySelector('.navbar').style.display = 'none';
      }

      // 重置所有导航栏链接颜色
      const navbarLinks = document.querySelectorAll('.navbar a');
      navbarLinks.forEach(link => {
        link.style.color = '#666';
        link.classList.remove('active');
      });

      // 设置当前页面导航栏链接颜色
      switch (destination.index) {
        case 1:
          navbarLinks[1].style.color = 'royalblue';
          navbarLinks[1].classList.add('active');
          break;
        case 2:
          navbarLinks[2].style.color = 'royalblue';
          navbarLinks[2].classList.add('active');
          break;
        case 3:
          navbarLinks[3].style.color = 'royalblue';
          navbarLinks[3].classList.add('active');
          break;
        case 4:
          navbarLinks[4].style.color = 'royalblue';
          navbarLinks[4].classList.add('active');
        default:
          break;
      }
    },
    afterLoad: function(origin, destination, direction) {
      var video = document.getElementById('video1');
      if (destination.index === 0) {
        video.play();
      }
    }
  });
});


/* 第二页 */
let lastPositions = [0, 0, 0];
  document.addEventListener('mousemove', function(e) {
  requestAnimationFrame(() => {
  const moveImage1 = document.querySelector('.move-image1');
  const moveImage2 = document.querySelector('.move-image2');
  const moveImage3 = document.querySelector('.move-image3');
  
  const mouseX = e.clientX;
  const centerX = window.innerWidth / 2;
  const moveDistance = -(mouseX - centerX) / 20;
  
  const newPosition1 = lastPositions[0] + (moveDistance - lastPositions[0]) * 0.05;  // 第一张图片
  const newPosition2 = lastPositions[1] + (moveDistance - lastPositions[1]) * 0.1;   // 第二张图片
  const newPosition3 = lastPositions[2] + (moveDistance - lastPositions[2]) * 0.15;  // 第三张图片
  
  moveImage1.style.transform = `translateX(${newPosition1}px)`;
  moveImage2.style.transform = `translateX(${newPosition2}px)`;
  moveImage3.style.transform = `translateX(${newPosition3}px)`;
  
  lastPositions = [newPosition1, newPosition2, newPosition3];
});
});


/* 第三页 */
function page3_showScene(sceneNumber) {
  var page3_scenes = document.querySelectorAll('.scene');
  page3_scenes.forEach(function(scene, index) {
      if (index === sceneNumber - 1) {
          scene.classList.add('active1');
      } else {
          scene.classList.remove('active1');
      }
  });
}

let page3_lastPositions = [0, 0, 0, 0, 0, 0, 0];
document.addEventListener('mousemove', function(e) {
  requestAnimationFrame(() => {
      const page3_moveImages = document.querySelectorAll('.qh-bj');

      const page3_mouseX = e.clientX;
      const page3_centerX = window.innerWidth / 2;
      const page3_moveDistance = -(page3_mouseX - page3_centerX) / 20;

      page3_moveImages.forEach((image, index) => {
          const page3_newPosition = page3_lastPositions[index] + (page3_moveDistance - page3_lastPositions[index]) * (index + 1) / 100;
          image.style.transform = `translateX(${page3_newPosition}px)`;
          page3_lastPositions[index] = page3_newPosition;
      });
  });
});
const sceneDescriptions = {
  1: "崩坏学圆2",
  2: "崩坏3",
  3: "原神",
  4: "星穹铁道",
  5: "鸣潮",
  6: "GBC乐队",
  7: "火影忍者"
};

function showScene_3(sceneNumber) {
  const sceneText = document.getElementById('sceneText');
  sceneText.innerText = sceneDescriptions[sceneNumber];
  sceneText.classList.add('show');
}

/* 第四页 */
const dataContainerPage4 = document.getElementById('dataContainerPage4');
        const refreshButtonPage4 = document.querySelector('.refresh-button');

        function createNewsItemHTMLPage4(newsItem) {
            const imageUrl = JSON.parse(newsItem.sExt)["news-banner"][0].url;

            const newsItemHTMLPage4 = `
                <a href="https://www.mihoyo.com/news/${newsItem.iInfoId}" class="news-list__item">
                    <div class="news-list__item-banner">
                        <img src="${imageUrl}" alt="${newsItem.sTitle}">
                    </div>
                    <div class="news-list__item-content">
                        <div class="news-list__item-date">
                            <div>${newsItem.dtStartTime}</div>
                            <div class="year">${newsItem.sCategoryName}</div>
                        </div>
                        <div class="news-list__item-title">
                            <div>${newsItem.sTitle}</div>
                        </div>
                        <div class="news-list__item-desc">
                            ${newsItem.sIntro}
                        </div>
                    </div>
                </a>
            `;

            return newsItemHTMLPage4;
        }

        async function fetchDataAndUpdateContentPage4(page4) {
            const response = await fetch(`https://api-takumi-static.mihoyo.com/content_v2_user/app/537c17c553834ed6/getContentList?iPageSize=1&iPage=${page4}&sLangKey=zh-cn&iChanId=107`);
            const data = await response.json();

            const newsItem = data.data.list[0]; // Assuming the API returns data in an array
            const newsItemHTMLPage4 = createNewsItemHTMLPage4(newsItem);

            dataContainerPage4.innerHTML = newsItemHTMLPage4;
        }

        let currentPage4 = 1; // Start from page 2
        fetchDataAndUpdateContentPage4(currentPage4);

        refreshButtonPage4.addEventListener('click', () => {
            currentPage4++;
            fetchDataAndUpdateContentPage4(currentPage4);
        });


/* 第五页 */
function changeImage() {
  var randomNum = Math.floor(Math.random() * 20) + 1; // 生成1到7的随机数
  var imgPath = './img/' + randomNum + '.png'; // 根据随机数生成图片路径
  var displayedImg = document.getElementById('displayed-img');

  displayedImg.style.transform = 'scale(0.1) rotate(360deg)'; // 缩小并旋转图片
  setTimeout(function() {
      displayedImg.src = imgPath; // 修改图片路径
      displayedImg.style.transform = 'scale(1) rotate(0deg)'; // 恢复正常大小并取消旋转
  }, 500); // 等待过渡效果结束
}